/**
 * webpack核心配置文件
 */
const path = require('path') // 处理路径模块  node内置的
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包html
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 从js中提取css成独立文件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin')

module.exports = {
    // 1. 入口
    entry: {
        dom: "./src/js/common-js/dom.js",
        http: "./src/js/common-js/http.js",
        utils: "./src/js/common-js/utils.js",
        commonCss: './src/js/common-js/commonCss.js', // 公用的css

        login: "./src/js/login.js", // 登录
        index: "./src/js/index.js", // 首页
        advertise: "./src/js/advertise.js", //广告宣传页
        register: "./src/js/register.js", //注册页面
        sports: "./src/js/sports.js", //运动页面
        mine: "./src/js/mine.js", //个人中心
        mine_edit: "./src/js/mine-edit.js", //修改个人中心数据
        run_data: "./src/js/run-data.js", //运动数据
        sports_data: "./src/js/sports-data.js", //运动课程
        play: "./src/js/play.js", //视频播放
    },

    // 2. 出口
    output: {
        path: path.resolve(__dirname, 'dist'), // 输出目录
        filename: 'js/[name]-[hash:10].js', // 输出的文件名
        // publicPath: '../', // 资源路径
    },

    // 3. loader配置
    module: {
        rules: [
            // 处理css
            {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader, // 提取css
                        options: {
                            publicPath: '../' // 输出路径
                        }
                    },
                    'css-loader'
                ]
            },

            // 处理less
            {
                test: /\.less$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader, // 从js中提取css
                        options: {
                            publicPath: '../' // 资源查找路径
                        }
                    },
                    'css-loader', // 解析css
                    'postcss-loader', // 处理css兼容性
                    'less-loader' // 编译less
                ]
            },

            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 10 * 1024,
                    name: '[hash:10].[ext]',
                    esModule: false, // 关闭es module
                    outputPath: 'imgs', // 打包后输出目录
                }
            },

            // 处理html中引入的图片
            {
                test: /\.html$/,
                loader: 'html-loader',
            },

            // 处理字体格式文件
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]',
                    outputPath: 'fonts'
                }
            },

            // 处理js
            {
                test: /\.js$/,
                loader: 'babel-loader', // loader
                exclude: /node_modules/ // 排除
            },

            // 其他资源
            {
                exclude: /\.(html|js|json|css|less|jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]',
                }
            },
        ]
    },

    // 4. 模式
    // mode: 'development',
    mode: 'production',

    // 5. 插件
    plugins: [
        // 广告宣传页
        new HtmlWebpackPlugin({
            template: './src/advertise.html', // 模板页面
            filename: 'advertise.html', // 输出的文件名
            chunks: ["advertise", 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 注册页面
        new HtmlWebpackPlugin({
            template: './src/register.html', // 模板页面
            filename: 'register.html', // 输出的文件名
            chunks: ["register", 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 登录页
        new HtmlWebpackPlugin({
            template: './src/login.html', // 模板页面
            filename: 'login.html', // 输出的文件名
            chunks: ['login', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),

        // 首页
        new HtmlWebpackPlugin({
            template: './src/index.html', // 模板页面
            filename: 'index.html', // 输出的文件名
            chunks: ['index', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 运动
        new HtmlWebpackPlugin({
            template: './src/sports.html', // 模板页面
            filename: 'sports.html', // 输出的文件名
            chunks: ['sports', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 课程详情页
        new HtmlWebpackPlugin({
            template: './src/sports-data.html', // 模板页面
            filename: 'sports-data.html', // 输出的文件名
            chunks: ['sports_data', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 课程视频播放页
        new HtmlWebpackPlugin({
            template: './src/play.html', // 模板页面
            filename: 'play.html', // 输出的文件名
            chunks: ['play', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 我的
        new HtmlWebpackPlugin({
            template: './src/mine.html', // 模板页面
            filename: 'mine.html', // 输出的文件名
            chunks: ['mine', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 修改个人数据
        new HtmlWebpackPlugin({
            template: './src/mine-edit.html', // 模板页面
            filename: 'mine-edit.html', // 输出的文件名
            chunks: ['mine_edit', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),
        // 运动数据
        new HtmlWebpackPlugin({
            template: './src/run-data.html', // 模板页面
            filename: 'run-data.html', // 输出的文件名
            chunks: ['run_data', 'commonCss', 'dom', 'http', 'utils'] // 需要引入哪些资源
        }),

        // 提取css
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css', // 重命名输出的css
        }),

        // 压缩css
        new OptimizeCssAssetsWebpackPlugin(),

        // 删除dist
        new CleanWebpackPlugin(),
    ],

    // 6. 启动开发服务器
    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器路径
        compress: true, // 开启gzip压缩
        port: 666, // 端口
        open: true, // 自动打开
        openPage: 'advertise.html'
    },
}
